import CodeBlock from "@theme/CodeBlock";

import CoordinatesGenerator from "@site/src/components/CoordinatesGenerator";

Masks are used to exclude certain areas in the image from object detection.
If a detected object has its lower portion inside of the mask it will be discarded.

The `coordinates` form a polygon around the masked area.<br></br>
To easily generate `coordinates` you can use a tool like [image-map.net](https://www.image-map.net/).<br></br>
Just upload an image from your camera, choose the `Poly` shape and start drawing your mask.<br></br>
Then click **Show me the code!** and adapt it to the config format.<br></br>
Coordinates `coords="522,11,729,275,333,603,171,97"` should be turned into this:

<CodeBlock language="yaml" showLineNumbers>
  {`${
    props.meta && props.meta.name
      ? props.meta.name
      : "<object detector component>"
  }:
    object_detector:
      cameras:
        camera_one:
          ...
          // highlight-start
          mask:
            - coordinates:
                - x: 522
                  y: 11
                - x: 729
                  y: 275
                - x: 333
                  y: 603
                - x: 171
                  y: 97
          // highlight-end`}
</CodeBlock>

<CoordinatesGenerator meta={props.meta} domain={"object_detector"} />
